<template>
  <div class="login-wrapper">
    <div class="logo">
      <!-- <img src="@/assets/img/topleft.png" alt="车查查">
                  <img src="@/assets/img/topRight.png" alt="车查查"> -->
      <img src="@/assets/img/login-top.png" alt="车查查">
    </div>
    <div class="main">
      <img src="@/assets/img/cloud.png" />
      <div class="el-form">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" lable="top">
          <el-form-item label="账号" prop="phone">
            <el-input v-model="ruleForm.phone" placeholder="手机号"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="rulepassword">
            <div style="display:flex; justify-content:space-between;width: 100%;margin: 0 auto;">
              <el-input v-model="ruleForm.rulepassword" @keyup.enter.native="submitForm('ruleForm')" @focus="getCode"
                @blur="setCode"></el-input>
              <vueImageVerify ref="vueImageVerify" @getIdentifyCode="getIdentifyCodes" />
            </div>
            <el-tag v-if="tagError" class="tagError">{{ "验证码错误" }}</el-tag>
          </el-form-item>
          <div class="mini-password">
            <el-button class="mini" type="text" @click="link">联系我们</el-button>
            <el-button type="text" @click="passreset">忘记密码</el-button>
          </div>
          <el-form-item style="text-align:center;">
            <el-button class="login-btn" type="primary" @click="submitForm('ruleForm')">登录</el-button>
          </el-form-item>
        </el-form>

        <el-button class="text" type="text" @click="agreement">登录即同意《用户协议》和《隐私政策》</el-button>

        <!-- <div style="display:flex;justify-content:space-between;position: relative;top:-10px">
                <el-button class="mini" type="text" @click="register">我要注册</el-button>
                <el-button class="mini" type="text" @click="link">联系我们</el-button>
              </div> -->

      </div>
    </div>
    <p style="text-align: center;font-size: 13px;color: #B7B7B7;position: relative;bottom: -50px;">鉴评云评估管理系统 V1.0
      Copyright &copy; 版权所有 车查查科技有限公司</p>
    <p style="text-align: center;position: relative;bottom: -50px;"><el-link :underline="false"
        style="font-size: 13px;color: #B7B7B7;" href="https://beian.miit.gov.cn/#/Integrated/index"
        target="_blank">辽ICP备2022008256号-5</el-link></p>
    <Password ref="passwordRef" v-if="passShow" :passShow="passShow" @dialogClose="dialogClose"></Password>
    <Register ref="registerRef" v-if="registerShow" :registerShow="registerShow" @dialogClose="dialogClose"></Register>
    <Link ref="linkRef" v-if="linkShow" :linkShow="linkShow" @dialogClose="dialogClose">
    </Link>
    <Agreement ref="agreeRef" v-if="agreeShow" :agreeShow="agreeShow" @dialogClose="dialogClose"></Agreement>
  </div>
</template>

<script>
import Password from '@/view/enter/password.vue';
import Register from '@/view/enter/register.vue';
import Link from '@/view/enter/link.vue';
import Agreement from '@/view/enter/agreement.vue';
import { login } from '@/api/login';
import { getToken } from '@/assets/js/token';
import vueImageVerify from './vueImageVerify.vue';
export default {
  name: "login",
  data: function () {
    return {
      passShow: false,
      registerShow: false,
      linkShow: false,
      agreeShow: false,

      valiatecode: '',
      tagError: false,
      ruleForm: {
        phone: "",
        password: "",
        isLastingCookie: true,
      },
      rules: {
        phone: [{
          required: true,
          message: "请输入用户名",
          trigger: "blur"
        }],
        password: [{
          required: true,
          message: "请输入密码",
          trigger: "blur"
        }],
        rulepassword: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {

    passreset () {
      this.passShow = true;
    },
    register () {
      this.registerShow = true;
    },
    link () {
      this.linkShow = true;
    },
    agreement () {
      this.agreeShow = true;
    },
    dialogClose () {
      this.passShow = false;
      this.registerShow = false;
      this.linkShow = false;
      this.agreeShow = false;
    },
    // save (e) {
    //   this.isLastingCookie = e
    // },
    getCode () {
      if (this.tagError) {
        this.$refs.vueImageVerify.createdCode()
      } else {
        return
      }
    },
    setCode () {
      if (this.ruleForm.rulepassword) {
        let str = this.ruleForm.rulepassword.toUpperCase()
        if (this.valiatecode != str) {
          this.tagError = true
        } else {
          this.tagError = false
        }
      } else {
        this.tagError = false
      }
    },
    getIdentifyCodes () {
      this.valiatecode = this.$refs.vueImageVerify.returnCode()
      this.valiatecode = this.valiatecode.toUpperCase()
      if (this.ruleForm.rulepassword && this.valiatecode != this.ruleForm.rulepassword) {
        this.tagError = true
      } else {
        this.tagError = false
      }
    },
    submitForm (formName) {

      this.$refs[formName].validate(valid => {
        if (!valid) {
          // this.$message.error("输入格式有误");
          return false;
        } else {
          let str = this.ruleForm.rulepassword.toUpperCase()
          if (this.valiatecode != str) {
            this.tagError = true
            this.$refs.vueImageVerify.createdCode()
            return
          } else {
            this.$delete(this.ruleForm, 'rulepassword')

            login(this.ruleForm).then((res) => {
              if (res.code === 200) {
                localStorage.setItem("username", res.data.userName);
                localStorage.setItem('userId', res.data.id)
                localStorage.setItem('companyId', res.data.companyId)
                if (res.data.userPhoto) {
                  localStorage.setItem('userPhoto', res.data.userPhoto)
                } else {
                  localStorage.setItem('userPhoto', 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')
                }
                localStorage.setItem('role', res.data.role)

                // this.$router.push("/index")
                window.location.href = '/'
              } else {
                this.$refs.vueImageVerify.createdCode()
                return
              }
            })

          }
        }

      });
    }
  },
  mounted () {
    if (!getToken()) {
      this.ruleForm = {
        phone: "",
        password: "",
        isLastingCookie: true,
      }
    }

  },
  components: { Password, Register, Link, Agreement, vueImageVerify }
}
</script>

<style scoped lang="less">
.login-wrapper {
  width: 100%;
  height: 100vh;
  overflow: auto;
  background-image: url("@/assets/img/background.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.logo {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.logo img {
  // width: 40%;
  width: 100%;
  height: auto;

}

.main {
  width: 20%;
  text-align: center;
  margin: 0 auto;
  position: relative;
  top: -20px;
  // border: 1px solid red;
}

.main img {
  width: 100px;
  height: 56px;
}

.el-form {
  width: 90%;
  margin: 0 auto;
  text-align: center;
  padding: 0;
}

:deep .el-form-item--medium .el-form-item__label::before {
  display: none;
}

/deep/ .el-button--primary:hover,
.el-button--primary:active,
.el-button--primary:focus:not(.el-button--primary:hover) {
  background-color: #2EB3FF;
}

.login-btn {
  width: 100%;
  height: 36px;
  height: 36px;
  font-size: 16px;
}

/deep/ .el-input--medium .el-input__inner {
  font-size: 14px;
}

.el-form /deep/ .el-form-item__label {
  font-size: 13px;
  color: #fff;
}

.tagError {
  color: #f56c6c;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  padding-left: 0;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: rgba(225, 225, 225, 0);
  border: none
}

.mini-password /deep/ .el-button--medium {
  padding: 0;
}

.mini-password {
  width: 100%;
  // text-align: right;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;

}

.text {
  position: relative;
  top: -20px;
}
</style>
